<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>1.偏移尺寸offset</p>
<img src="offset.jpg" height="300px"/>
<p>3.滚动尺寸scroll</p>
<img src="scroll.jpg" height="300px">
<script>
    /*
        1.偏移尺寸 offset (content+padding+border)
            offsetHeight
            offsetLeft
            offsetTop
            offsetWidth
     */
    
    /*
        2.客户端尺寸client(content+padding)
            clientWidth
            clientHeight
     */
    
    /*
        3.滚动尺寸scroll 
            scrollHeight
            scrollLeft
            scrollTop
            scrollWidth
     */
    // 下面这个函数检测元素是不是位于顶部，如果不是则把它滚动回顶部:
        function scrollToTop(element) { if (element.scrollTop != 0) {
            element.scrollTop = 0; }
        }
        
        /*
            4.确定元素尺寸
                浏览器在每个元素上都暴露了 getBoundingClientRect()方法，返回一个 DOMRect 对象，包含 6 个属性:left、top、right、bottom、height 和 width。
         */
</script>
</body>
</html>